<template>
  <div class="operationMonitoring">
    <div style="float: right;">
      <el-button @click="changeShowStyle()">转换显示类型</el-button>
    </div>
    <div id="mapDiv" class="mapDiv" ref="mapDiv" v-if="isMap"></div>
    <div class="InfoWindow"></div>
  </div>
</template>

<script>
import { getByZoom } from '@/api/equipManagement'
import { grade1, plcRealTime } from '@/api/operationMonitoring'
import { getListType } from '@/api/equipmentTypeManagement'

export default {

  data() {
    return {
      equipArray: [],
      markArray: [],
      isMap: true,
      map: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {

    async initMap() {
      let that = this
      let MapOptions = { minZoom: 13 }
      this.map = new T.Map('mapDiv', MapOptions)
      this.map.centerAndZoom(new T.LngLat(118.16894531249999, 30.128796856732382), 13)
      let bounds = '118.05953,30.21401,118.25032,30.03887'.split(',')
      this.map.setMaxBounds(new T.LngLatBounds(new T.LngLat(bounds[0], bounds[1]), new T.LngLat(bounds[2], bounds[3])))

      let page = {
        pageNum: 1,
        pageSize: 1000
      }
      let typeRes = await getListType(page)
      console.log(typeRes)
      let iconWaterFactory = new T.Icon({
        iconUrl: typeRes.data.resultList[0].img,
        iconSize: new T.Point(27, 27),
        iconAnchor: new T.Point(10, 25)
      })
      let iconWaterX = new T.Icon({
        iconUrl: typeRes.data.resultList[1].img,
        iconSize: new T.Point(27, 27),
        iconAnchor: new T.Point(10, 25)
      })
      let iconWaterP = new T.Icon({
        iconUrl: typeRes.data.resultList[2].img,
        iconSize: new T.Point(27, 27),
        iconAnchor: new T.Point(10, 25)
      })

      let grade1Res = await grade1()

      for (let item of grade1Res.data) {
        let url = ''
        if (item.typeId == 1) {
          url = iconWaterFactory
        }
        if (item.typeId == 2) {
          url = iconWaterX
        }
        if (item.typeId == 3) {
          url = iconWaterP
        }
        var marker = new T.Marker(new T.LngLat(item.longitude, item.latitude), { icon: url })  // 创建标注
        var content = item
        that.map.addOverLay(marker)               // 将标注添加到地图中
        addClickHandler(content, marker, this)
      }

      function addClickHandler(content, marker, window) {
        marker.addEventListener('click', function(e) {
            openInfo(content, e, window)
          }
        )
      }

      async function openInfo(content, e, window) {
        let plcRes = await plcRealTime(content.id)
        window.contentArray = []
        for (let key in plcRes.data) {
          window.contentArray.push({
            key: plcRes.data[key].name,
            data: plcRes.data[key].value,
            unit: plcRes.data[key].unit
          })
        }

        var sContent = `<div style="overflow-y:auto; overflow-x:auto; width:400px; height:400px;">
                                <p>
                                <span class="spanName">${content.deviceName}</span>
                                </p>
                                <p>
                                <span class="titleSpan">经度</span>
                                <span class="spanData">${e.lnglat.lng}</span>
                                </p>
                                <p>
                                <span class="titleSpan">纬度</span>
                                <span class="spanData">${e.lnglat.lat}</span>
                                </p>`

        let generateStr = function(t) {
          return `<p>
                                <span class="titleSpan">${t.key}</span>
                                <span class="spanData">${t.data}</span>
                                <span class="spanData">${t.unit}</span>
                                </p>`
        }

        let convert =function(window,sContent){
          return sContent;
        }

        window.contentArray.forEach((e,i)=>{
          // if (i<=5){
            sContent += generateStr(e)
          // }
        })
        sContent += '</div>'
        var point = e.lnglat
        console.log(e.lnglat)

        var markerInfoWin = new T.InfoWindow(sContent, { offset: new T.Point(0, -30) }) // 创建信息窗口对象
        that.map.openInfoWindow(markerInfoWin, point) //开启信息窗口

      }

    },
    changeShowStyle() {
      this.$router.push({ path: '/operationMonitoring/table' })

    }

  }
}
</script>

<style lang="scss">
.operationMonitoring {

  .tdt-infowindow-content {
    margin-top: 0px;
    /*margin-right: 0px;*/
    /*margin-left: 0px;*/
    /*margin-bottom: 0px;*/
  }

  .el-input__inner {
    width: 210px;
  }

  .mapDiv {
    width: 100%;
    height: 85vh;
  }

  .InfoWindow {
    display: inline;
    :nth-child(1) {
      margin-top: 0px;
    }
  }

  .titleSpan {
    width: 140px;
    display: inline-block;
  }

  .titleSpan2 {
    width: 40px;
    display: inline-block;
  }

  .spanData {
    color: #1482f0;
  }

  .spanName {
    font-size: 16px;
  }
}

</style>
